<template>
    <div style="padding-bottom: 50px; overflow: scroll; position: fixed;z-index: 999; top: 46px; width: 100%;height: calc(100vh - 46px);background-color: #fff;">
        <div >

            <!-- 轮播图 -->
            <van-swipe  class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in gallery" :key="index" >
                    <van-image
                    :src="item"
                    fit="cover"
                    />
                </van-swipe-item>
            </van-swipe>

            <!-- 介绍 -->
            <div style="margin: 15px;">
                <b style="display:block;padding: 3px 0;">{{ name }}</b>
                <p style="margin: 0;">{{ brief }}</p>
                <div>
                    <span><b style="display: inline-block; color: red;margin: 4px 10px 4px 0px;">{{ retailPrice }}元</b><del>{{ counterPrice }}元</del></span>
                    <span style="float: right;">库存:{{ number }}件</span>
                </div>
            </div>
            <div class="introduce" v-html="detail" style=" width: 100%;height: calc(100vh - 480px);"></div>


    <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button @click="addStrt($route.query.id,datas.productList[0].id)" type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>    
</div>

    <!-- 底部购买 收藏 -->
 
</template>

<script>
import { Dialog } from 'vant';
export default {
async created(){
    await this.$axios({
       url:`/wx/goods/detail?id=` + this.$route.query.id
    }).then(res=>{
        console.log(res.data.data);
        this.datas=res.data.data
        this.gallery=this.datas.info.gallery
        this.detail=this.datas.info.detail
        this.name=this.datas.info.name
        this.brief=this.datas.info.brief
        this.counterPrice=this.datas.info.counterPrice
        this.retailPrice=this.datas.info.retailPrice
        this.number=this.datas.productList[0].number
        // console.log(this.detail);
    })
},
data(){
    return{
        datas:'',
        gallery:[],
        detail:'',
        name:'',
        brief:'',
        counterPrice:'',
        retailPrice:'',
        number:'',
    }
},
methods:{
    async addStrt(id,pid){
        // console.log(id);
        if(localStorage.getItem('X-Litemall-Token')){
            await this.$axios({
                method:'POST',
                url:'/wx/cart/add',
                headers:{
                    'X-Litemall-Token':localStorage.getItem('X-Litemall-Token')
                },
                data:{
                    "goodsId": id, 
                    "number": 1, 
                    "productId": pid, 
                }
            }).then(res=>{
                console.log(res);
                console.log(pid);
            })

            Dialog.alert({
        theme: 'round-button',
        message: '加入购物车成功!',
        }).then(() => {
        // on close
        });
        }
        else{
            console.error('请登录');
            this.$router.push('/login')
        }


    }
},
}
</script>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 30vh;
    background-color: #39a9ed;
    /* margin-bottom: 50px; */
  }
.introduce img{
    width: 100%;
    float: left;
    margin: 0 0;
    padding: 0 0 ;
}
</style>